<template>
  <div class="user-fash-message">
    <h3>完善档案信息</h3>
    <hr>
    <h4>居民信息</h4>
    <div class="user-pull">
        <span>居民编号</span>
        <span style="margin-left:10px;">20200908900</span>
        <el-form :model="formInline" class="demo-form-inline" style="display:inline-block; margin-left: 150px; margin-right: 130px;margin-bottom: 20px;">
          <span style="margin-right: 8px;">姓名</span>
          <el-input v-model="form.name" style="width:180px; display: inline-block;" placeholder="请输入"/>
       </el-form>
       <span>居民头像</span>
       <div class="demo-type" style="display:inline-block;margin-left: 20px;margin-right: 20px;">
      <el-avatar :icon="UserFilled" />
      </div>
      <el-link> +点击上传</el-link>
    </div>
    <div>
        <div style="display: inline-block; margin-bottom: 10px;">
        <span style="margin-right: 8px;">身份证号</span>
      <el-input v-model="form.date3" style="width:180px; display: inline-block;" placeholder="请输入"/>
      </div>
      <div style="display: inline-block; margin-left: 10px;margin-bottom: 10px;">
        <span style="margin-left: 60px; margin-right: 8px;">手机号码</span>
      <el-input v-model="form.date4" style="width:160px; display: inline-block;" placeholder="居民登录账号"/>
    </div>
    <div style="display: inline-block; margin-left: 10px">
      <span style="margin-left: 125px; margin-right: 8px;">居民标签</span>
        <el-select
          multiple 
          v-model="value5"
          collapse-tags
          placeholder="请选择"
          style="width: 180px"
        >
          <el-option
            v-for="item in arr5"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div>
        <el-form :model="form" style="display:inline-block; margin-top: 10px;">
          <span style="margin-right: 8px;">现居地</span>
            <el-input v-model="form.address" style="width:500px;" placeholder="请输入"/>
        </el-form>
        <div style="display: inline-block; margin-left: 10px;margin-bottom: 10px;">
        <span style="margin-left: 120px; margin-right: 8px;">行政区划</span>
      <el-input v-model="form.date5" style="width:160px; display: inline-block;" placeholder="请输入"/>
        </div>
       </div>
       <div>
        <el-form :model="form" style="display:inline-block; margin-top: 10px;">
          <span style="margin-right: 8px;">户籍地</span>
            <el-input v-model="form.address2" style="width:500px;" placeholder="请输入"/>
        </el-form>
        <div style="display: inline-block; margin-left: 15px">
        <span style="margin-left: 120px; margin-right: 8px;">家庭成员</span>
        <el-link> +联家庭成员</el-link>
      </div>
       </div>
       <div>
        <div style="display: inline-block;margin-bottom: 10px; margin-top: 20px; margin-right: 60px;">
        <span style="margin-right: 8px;">性别</span>
        <el-select v-model="form.region" placeholder="请选择">
        <el-option label="请选择" value="请选择" />
        <el-option label="男" value="男" />
        <el-option label="女" value="女" />
      </el-select>
    </div>
    <div class="demo-date-picker">
    <div class="block">
      <span class="demonstration" style="color:#000">出生年月</span>
      <el-date-picker
        v-model="lest"
        type="date"
        placeholder="请选择日期"
        :default-value="new Date(2022, 11, 8)"
        style="display:inline-block;
        margin-left: 30px;
        width: 160px;"
      />
    </div>
    </div>
    <div style="display: inline-block; margin-bottom: 10px; margin-left: 130px;">
        <span style="margin-right: 8px;">籍贯</span>
      <el-input v-model="form.date6" style="width:180px; display: inline-block;" placeholder="请输入"/>
      </div>
       </div>
       <div>
        <span style="margin-right: 8px;">民族</span>
        <el-select v-model="value2" class="m-2" placeholder="请选择" style="margin-right:60px;">
      <el-option
      v-for="item in option1"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
  <span style="margin-right: 8px;">文化程度</span>
        <el-select v-model="value3" class="m-2" placeholder="请选择" style="margin-right:60px;">
      <el-option
      v-for="item in option2"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>

  <span style="margin-right: 8px;">婚姻状况</span>
        <el-select v-model="value4" class="m-2" placeholder="请选择">
      <el-option
      v-for="item in option3"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
       </div>
       <div>
        <div style="display: inline-block; margin-bottom: 20px;">
        <span style="margin-right: 8px;">职业</span>
      <el-input v-model="form.date7" style="width:200px; display: inline-block;" placeholder="请输入"/>
    </div>
    <el-form :model="form" style="display:inline-block; margin-top: 20px; margin-left: 110px;">
          <span style="margin-right: 8px;">工作单位</span>
            <el-input v-model="form.date8" style="width:600px; " placeholder="请输入"/>
        </el-form>
       </div>

       <div>
        <div style="display: inline-block; margin-bottom: 20px;">
        <span style="margin-right: 8px;">紧急联系人</span>
      <el-input v-model="form.date9" style="width:200px; display: inline-block;" placeholder="请输入"/>
    </div>
    <div style="display: inline-block; margin-left: 10px;margin-bottom: 10px;">
        <span style="margin-left: 60px; margin-right: 8px;">联系电话</span>
      <el-input v-model="form.address1" style="width:160px; display: inline-block;" placeholder="请输入"/>
    </div>
    <div style="display: inline-block; margin-left: 10px;margin-bottom: 10px;">
        <span style="margin-left: 60px; margin-right: 8px;">登录密码</span>
      <el-input v-model="form.date10" style="width:220px; display: inline-block;" placeholder="8位以上的数字和字母组合"/>
    </div>
       </div>

       <hr style="color:#eee">
       <div>
        <div style="display: inline-block;margin-bottom: 10px; margin-top: 20px; margin-right: 60px;">
        <span style="margin-right: 8px;">户籍类型</span>
        <el-select v-model="form.region" placeholder="请选择">
        <el-option label="请选择" value="请选择" />
        <el-option label="农村" value="农村" />
        <el-option label="城镇" value="城镇" />
      </el-select>
    </div>
    <el-form :model="form" style="display:inline-block; margin-top: 20px; margin-left: 10px;">
          <span style="margin-right: 8px;">定点医疗单位</span>
            <el-input v-model="form.date11" style="width:560px; " placeholder="请输入"/>
        </el-form>
       </div>
       <div>
        <span style="margin-right: 16px;">费用类型</span>
        <el-checkbox-group
        v-model="checkedCities"
        @change="handleCheckedCitiesChange"
        style="display:inline-block;"
        >
         <el-checkbox v-for="city in cities" :key="city" :label="city">{{
      city
    }}</el-checkbox>
  </el-checkbox-group>
       </div>
       <hr>
       <h4>健康信息</h4>
       <div>
        <div style="display: inline-block; margin-bottom: 10px;">
        <span style="margin-right: 8px;">身高</span>
      <el-input v-model="form.height" style="width:180px; display: inline-block; margin-right: 10px;" placeholder="请输入"/>
      <span>cm</span>
      </div>
      <div style="display: inline-block; margin-bottom: 10px; margin-left: 110px;">
        <span style="margin-right: 8px;">体重</span>
      <el-input v-model="form.mod" style="width:180px; display: inline-block; margin-right: 10px;" placeholder="请输入"/>
      <span>kg</span>
      </div>
      <div style="display: inline-block; margin-left: 10px">
      <span style="margin-left: 125px; margin-right: 8px;">血型</span>
        <el-select
          multiple 
          v-model="value6"
          collapse-tags
          placeholder="请选择"
          style="width: 180px"
        >
          <el-option
            v-for="item in arr6"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
       </div>
       <div>
        <div style="display: inline-block;margin-bottom: 20px; margin-top: 20px; margin-right: 60px;">
        <span style="margin-right: 8px;">RH阴性</span>
        <el-select v-model="form.region" placeholder="请选择">
        <el-option label="请选择" value="请选择" />
        <el-option label="是" value="是" />
        <el-option label="否" value="否" />
        <el-option label="不详" value="不详" />
      </el-select>
    </div>
       </div>
       <div>
        <div>
        <span style="margin-right: 30px;">过敏史</span>
        <div class="mb-2 flex items-center text-sm" style="display:inline-block;">
    <el-radio-group v-model="radio1" class="ml-4">
      <el-radio label="1" size="large">无</el-radio>
      <el-radio label="2" size="large">有</el-radio>
    </el-radio-group>
    </div>
  </div>
  <div>
  <span style="margin-right: 30px;">既往史</span>
        <div class="mb-2 flex items-center text-sm" style="display:inline-block;">
    <el-radio-group v-model="radio2" class="ml-4">
      <el-radio label="1">无</el-radio>
      <el-radio label="2">有</el-radio>
    </el-radio-group>
  </div>
  </div>
  <div>
  <span style="margin-right: 30px;">就诊史</span>
        <div class="mb-2 flex items-center text-sm" style="display:inline-block;">
    <el-radio-group v-model="radio3" class="ml-4">
      <el-radio label="1" size="large">无</el-radio>
      <el-radio label="2" size="large">有</el-radio>
    </el-radio-group>
  </div>
  </div>
  <div>
  <span style="margin-right: 15px;">家族病史</span>
        <div class="mb-2 flex items-center text-sm" style="display:inline-block;">
    <el-radio-group v-model="radio4" class="ml-4">
      <el-radio label="1">无</el-radio>
      <el-radio label="2">有</el-radio>
    </el-radio-group>
  </div>
  </div>
       </div>
       <hr>
       <div>
        <el-button :plain="true" @click="open2" style="background:blue;color:#fff">保存</el-button>
        <el-button type="primary" class="butt-4" style="background:#eee; color:#000"  @click="toUserAdd">返回</el-button>
       </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import router from '../../router'

import { UserFilled } from '@element-plus/icons-vue'

const lest = ref('')
const value2 = ref('')
const value3 = ref('')
const value4 = ref('')
const value5 = ref([])
const value6 = ref([])

const radio1 = ref('1')
const radio2 = ref('1')
const radio3 = ref('1')
const radio4 = ref('1')

const checkAll = ref(false)
const isIndeterminate = ref(true)
const checkedCities = ref(['Shanghai', 'Beijing'])
const cities = ['自费', '社会医疗保险', '商业保险', '新农合','其它']

const formInline = reactive({
  user: '',
  region: '',
})
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  date3:'',
  date4:'',
  date5:'',
  date6:'',
  date7:'',
  date8:'',
  date9:'',
  date10:'',
  date11:'',
  address:'',
  address1:'',
  address2:'',
  height:'',
  mod:'',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})
const open2 = () => {
  ElMessage({
    message: '保存成功',
    type: 'success',
  })
}
function toUserAdd () {
    router.push('/user-management/user-add')
}

const arr5 = [
  {
    value: '脂肪肝',
    label: '脂肪肝',
  },
  {
    value: '慢病护理',
    label: '慢病护理',
  },
  {
    value: '高血压',
    label: '高血压',
  },
  {
    value: '高血糖',
    label: '高血糖',
  },
]
const option1 = [
  {
    value: '请选择',
    label: '请选择',
  },
  {
    value: '汉族',
    label: '汉族',
  },
  {
    value: '回族',
    label: '回族',
  },
  {
    value: '维吾尔族',
    label: '维吾尔族',
  },
  {
    value: '藏族',
    label: '藏族',
  },
  {
    value: '其它少数民族',
    label: '其它少数民族',
  },
]
const option2 = [
  {
    value: '请选择',
    label: '请选择',
  },
  {
    value: '小学',
    label: '小学',
  },
  {
    value: '初中',
    label: '初中',
  },
  {
    value: '高中/中专',
    label: '高中/中专',
  },
  {
    value: '大专及以上',
    label: '大专及以上',
  },
  {
    value: '不详',
    label: '不详',
  },
]
const option3 = [
  {
    value: '请选择',
    label: '请选择',
  },
  {
    value: '未婚',
    label: '未婚',
  },
  {
    value: '已婚',
    label: '已婚',
  },
  {
    value: '离异',
    label: '离异',
  },
  {
    value: '丧偶',
    label: '丧偶',
  },
  {
    value: '不详',
    label: '不详',
  },
]
const arr6= [
  {
    value: '请选择',
    label: '请选择',
  },
  {
    value: 'A型',
    label: 'A型',
  },
  {
    value: 'B型',
    label: 'B型',
  },
  {
    value: 'O型',
    label: 'O型',
  },
  {
    value: '不详',
    label: '不详',
  },
]
const handleCheckedCitiesChange = (value: string[]) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === cities.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
}
</script>
<style scoped>
.demo-type {
  display: flex;
}
.demo-type > div {
  flex: 1;
  text-align: center;
}

.demo-type > div:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}
.demo-date-picker {
  display: inline-block;
  /* width: 100%; */
  padding: 0;
  flex-wrap: wrap;
}
.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
.demo-date-picker .demonstration {
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

</style>
